<template>
	<view class="">			
	<navBar isBack title="我的案例"></navBar>
	<view class="title">
		<view class="title-left df-ct">
			<text class="left-txt">筛选</text>
			<text class="iconfont icon-sanjiaoshang"></text>
		</view>
		<view class="search-box">
			<text class="iconfont icon-sousuo"></text>
			<input type="text" value="" placeholder="搜索我的案例"/>
		</view>
	</view>
	<view class="container">		
		<view class="content" v-for="(item,index) in list" :key="item.id">
			<view class="title" @tap="handleDetail(item.id)">{{item.title}}</view>
			<view class="text">
				<text class="biaoqing">{{item.design_stype.name}}</text>
				<text class="offer">报价：{{item.offer}}万</text>
				<text class="area offer">{{item.area}}m² | {{item.house_type}}</text>
			</view>
			<view class="swiper-content"  @tap="handleDetail(item.id)">
		<!-- <bw-img-upload style="width:100%" ></bw-img-upload> -->
				<view class="num" v-if="item.type==0">{{swiperNum}}/{{item.thumb_url.length}}</view>
				<template v-if="item.type==0">
					<swiper class="swiper" @animationfinish="swiperChange" :current="currentSwiper " circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<view v-for="(v,i) in item.thumb_url" :key="i">
							<swiper-item>							
								<image :src="v.path" mode=""></image>
							</swiper-item>
						</view>
									
					</swiper>
				</template>
				 <template v-else>
					  <image  class="video" :src="item.media.cover" mode=""></image>
					  <text class="iconfont icon-bofang df-ct"></text>
				  </template>
				
			</view>
			<view class="bottom df-bt">
				<view class="left df-ar">
					<view>
						<text class="iconfont icon-fenxiang"></text>
						<text>{{item.forward_num}}</text>
					</view>
					<view>
						<text class="iconfont icon-pinglun"></text>
						<text>{{item.comment_num}}</text>
					</view>
					<view>
						<text class="iconfont icon-shoucan"></text>
						<text>{{item.support_num}}</text>
					</view>
				</view>
				<view class="right" @tap="handleDel">
					删除
				</view>
				
			</view>
			<u-modal v-model="show" :content="content" show-cancel-button="true" @confirm="handleDelete(item.id)"></u-modal>
		</view>
		<loading-Text :loading='loading' :noMore='noMore'></loading-Text>
	</view>
	</view>
</template>

<script>
	import loadingText from '@/pageTwo/components/loading-text/loadingText.vue';
		export default {
			components:{
				loadingText
			},
			data() {
				return {			
					list:[],	
					baseimg:this.$static,				
					indicatorDots: true,
					autoplay: false,
					interval: 2000,
					duration: 500,
					currentSwiper:0,
					swiperNum:0,
					show:false,
					content:'确定要删除此案例吗',
					page:1,
					loading:false,
					noMore:false,
				}
			},
			onLoad() {
				this.swiperNum = 1
				this.getIndexData()
			},
			/**
			 * 页面相关事件处理函数--监听用户下拉动作
			 */
			async onPullDownRefresh() {
				uni.showLoading({
					title: '刷新中...',
				})
				let res1=await this.getCategory()
				// let res3=await this.getShopIcon()
				Promise.all([res1]).then(result=>{
					//隐藏loading 提示框
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
			/**
			 *@desc拉加载更多
			*/
			onReachBottom() {
				if (this.noMore) return
				this.loading = true
				this.getIndexData(1)
			
			},
			methods:{
				getIndexData(loadMore){
					if(this.noMore && loadMore)return;
					return new Promise(resolve=>{
						this.noMore = false
						if(!loadMore){
							this.page = 1;
						}else{
							this.loading = true;
						}
						let sid = this.$store.state.index.sid
						let params = {
							designer_id : sid,
							keyword : '',
							style : '',
							area : '',
							offer : '',
							page:this.page,
							
						}
						this.$api.designCase_GetList(params).then(res=>{
								let _list = res.data || [];								
								
								if (_list.length) {
									this.page += 1;
								}
								if(!_list.length){
									this.noMore=true
								}
								if (loadMore) {
									this.list = this.list.concat(_list);
									this.loading = false;
								} else {
									this.list = _list;
								}
						})
					})
					
				},
				handleDel(){
					this.show = true
				},
				handleDetail(e){
					console.log(e,"详情页ID");
					let id = e;
					uni.navigateTo({
						url:`/pageTwo/home/case/detail?id=${id}`
					})
				},
				swiperChange(e) {
					this.currentSwiper = e.detail.current
					this.swiperNum = e.detail.current+1
					console.log(this.currentSwiper,"下标")
				},
				handleDelete(event){
					console.log(event,66)
					let params = {
						id:event
					}
					this.$api.designCase_del(params).then(res=>{
						console.log(res,"shanchu")
					})
				}
			}
		}
</script>

<style scoped lang="less">
	.swiper {
		height: 272rpx;
	}
	.swiper-item {
		display: block;
		height: 272rpx;
		line-height: 272rpx;
		text-align: center;
	}
	.title{
		display: flex;
		background-color: #fff;
		padding: 24rpx;
		.title-left{
			width: 20%;
			font-size: 24rpx;
			color: #505050;
			.left-txt{
				
			}
		}
		.search-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 66rpx;
			background: #F5F5F5;
			border-radius: 34rpx;
			padding: 0;
			input{
				width: 90%;
				height: 100%;
				color: #A0A0A0;
			}
			.icon-sousuo{
				color: #505050;
				margin-left: 28rpx;
			}
		}
	}
	.container{
		padding: 0rpx 24rpx;
		
		//内容
		.content{
			background-color: #fff;
			padding: 28rpx 20rpx;
			margin: 30rpx 0;
			.title{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 44rpx;
				color: #333333;
			}
			.text{
				width: 100%;
				margin: 24rpx 0;
				.biaoqing{
						padding: 6rpx 20rpx;
						background: rgba(219, 169, 84, 0.1);
						color: #de9c00;
						border-radius: 22rpx;
						font-size: 22rpx;
						text-align: center;
						width: 20%;
						margin-right: 10rpx;
				}
				.offer{
					font-size: 26rpx;
					color: #505050;
					margin-right: 10rpx;
				}
				.area{
					width: 50%;
				}
			}
			.swiper-content{
				position: relative;
				.num{
					z-index: 99;
					color: #fff;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 20px;
					padding: 0rpx 28rpx;
					background: rgba(51, 51, 51, 0.6);
					border-radius: 28rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
				.video{
					width: 654rpx;
					height: 272rpx;
					border-radius: 8rpx;
					position: relative;
				}
				.icon-bofang{
					width: 72rpx;
					height: 72rpx;
					background: rgba(0, 0, 0, 0.4);
					border-radius: 50%;
					color: #fff;
					font-size: 28rpx;
					position: absolute;
					left: 44%;
					top:40%;
				}
			}
			.bottom{
				margin: 24rpx 0;
				.left{
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 20rpx;
					color: #6C6C6C;
					view{
						margin-right: 40rpx;
						text{
							&:first-child{
								margin-right: 10rpx;
							}
						}
					}
				}
				.right{
					padding: 10rpx 20rpx;
					background: #FFFFFF;
					border: 1px solid #505050;
					border-radius: 26rpx;
					font-weight: 400;
					line-height: 20rpx;
					color: #505050;
					font-size: 22rpx;
				}
			}
		}
	}
</style>
